'use client'

import React from 'react'
import { CollaborativeUser } from '@/types/sheet'

interface UserCursorProps {
  user: CollaborativeUser
  isActive: boolean
}

export function UserCursor({ user, isActive }: UserCursorProps) {
  if (!isActive || !user.cursor) return null

  return (
    <div
      className="absolute top-0 left-0 w-full h-full pointer-events-none z-10"
      style={{ backgroundColor: user.color + '20' }}
    >
      {/* 光标指示器 */}
      <div
        className="absolute w-0.5 h-full animate-pulse"
        style={{ backgroundColor: user.color }}
      />
      
      {/* 用户标签 */}
      <div
        className="absolute -top-6 left-0 px-1 py-0.5 text-xs rounded shadow-sm"
        style={{ 
          backgroundColor: user.color,
          color: 'white'
        }}
      >
        {user.name}
      </div>
    </div>
  )
}
